<!--
 * @Description: 第七章 认识Reactive全家桶 shallowReactive
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-11 11:18:12
-->

<template>
  <div>
    <p>shallowReactive</p>
    <div>
      <p>obj: {{ obj }}</p>
      <button @click="editObj">修改obj</button>
      <p>shallowReactiveObj_1: {{ shallowReactiveObj_1 }}</p>
      <button @click="editshallowReactiveObj_1">修改shallowReactiveObj_1</button>
      <p>shallowReactiveObj_2: {{ shallowReactiveObj_2 }}</p>
      <button @click="editshallowReactiveObj_2">修改shallowReactiveObj_2</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, shallowReactive } from 'vue'

let obj = reactive({
  name: 'I AM IA',
})

const shallowReactiveObj_1 = shallowReactive({
  foo: {
    bar: {
      num: 1,
    },
  },
})

const editObj = () => {
  obj.name = obj.name + ' Change!!'
  console.log('obj: ', obj)
}
const editshallowReactiveObj_1 = () => {
  // 因为shallowReactive属于浅层的，没办法修改num
  shallowReactiveObj_1.foo.bar.num = 2
  console.log('shallowReactiveObj_1: ', shallowReactiveObj_1)
}

const shallowReactiveObj_2: any = shallowReactive({
  foo: {
    bar: {
      num: 1,
    },
  },
})

const editshallowReactiveObj_2 = () => {
  // 因为shallowReactive属于浅层的，没办法修改num
  shallowReactiveObj_2.foo = {
    name: 'IA',
  }
  console.log('shallowReactiveObj_2: ', shallowReactiveObj_2)
}
</script>
<style scoped>
hr {
  margin: 10px 0;
}
</style>
